<template>
  <div class="home-view">
    <!-- 轮播图 -->
    <el-card class="banner-card">
      <el-carousel height="400px" :interval="5000" arrow="hover">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <div class="banner-item" @click="handleBannerClick(banner)">
            <el-image :src="banner.image" fit="cover" />
            <div class="banner-info">
              <h2>{{ banner.title }}</h2>
              <p>{{ banner.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>

    <!-- 文章列表区域 -->
    <div class="content-section">
      <!-- 文章分类标签 -->
      <el-card class="category-tabs">
        <el-tabs v-model="activeCategory" @tab-change="handleCategoryChange">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane
            v-for="category in categories"
            :key="category.value"
            :label="category.label"
            :name="category.value"
          />
        </el-tabs>
      </el-card>

      <!-- 文章列表 -->
      <blog-list
        :loading="loading"
        :blogs="blogs"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import BlogList from '@/components/blog/BlogList.vue'
import { useBlogStore } from '@/stores/blog'
import type { Banner, Blog, Category } from '@/types'

const router = useRouter()
const blogStore = useBlogStore()

// 状态
const loading = ref(false)
const activeCategory = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const blogs = ref<Blog[]>([])
const banners = ref<Banner[]>([])
const categories = ref<Category[]>([])

// 获取文章列表
const fetchBlogs = async () => {
  try {
    loading.value = true
    const { items, total: totalCount } = await blogStore.fetchBlogs({
      category: activeCategory.value === 'all' ? undefined : activeCategory.value,
      page: currentPage.value,
      pageSize: pageSize.value
    })
    blogs.value = items
    total.value = totalCount
  } catch (error) {
    console.error('Failed to fetch blogs:', error)
  } finally {
    loading.value = false
  }
}

// 获取轮播图数据
const fetchBanners = async () => {
  try {
    banners.value = await blogStore.fetchBanners()
  } catch (error) {
    console.error('Failed to fetch banners:', error)
  }
}

// 获取分类数据
const fetchCategories = async () => {
  try {
    categories.value = await blogStore.fetchCategories()
  } catch (error) {
    console.error('Failed to fetch categories:', error)
  }
}

// 处理分类切换
const handleCategoryChange = () => {
  currentPage.value = 1
  fetchBlogs()
}

// 处理分页
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchBlogs()
}

// 处理轮播图点击
const handleBannerClick = (banner: Banner) => {
  if (banner.link) {
    window.open(banner.link, '_blank')
  }
}

// 初始化
onMounted(() => {
  fetchBlogs()
  fetchBanners()
  fetchCategories()
})
</script>

<style lang="scss" scoped>
.home-view {
  padding: $spacing-md;
  
  .banner-card {
    margin-bottom: $spacing-lg;
    
    .banner-item {
      height: 100%;
      position: relative;
      cursor: pointer;
      
      .el-image {
        width: 100%;
        height: 100%;
      }
      
      .banner-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: $spacing-lg;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: #fff;
        
        h2 {
          margin: 0 0 $spacing-sm;
          font-size: $font-size-xl;
        }
        
        p {
          margin: 0;
          font-size: $font-size-base;
          opacity: 0.8;
        }
      }
    }
  }
  
  .content-section {
    .category-tabs {
      margin-bottom: $spacing-md;
    }
  }
}

// 响应式布局
@media (max-width: $breakpoint-md) {
  .home-view {
    padding: $spacing-sm;
    
    .banner-card {
      :deep(.el-carousel) {
        height: 300px !important;
      }
      
      .banner-info {
        h2 {
          font-size: $font-size-lg;
        }
      }
    }
  }
}
</style> 